<template>
  <view class="clothes">
    <view class="wrapper flex-column">
      <!-- <view class="weather"> 所在地：天气 推荐穿着 适宜颜色 </view> -->
      <view class="header">
        <view class="user-info flex-column-center">
          <img :src="avatarUrl" />
          <span class="name ml-24"
            >欢迎您！<span style="font-weight: bold">{{ username }}</span></span
          >
        </view>
        <view class="region-weather flex">
          <view class="region">
            <span class="label">当前所在地：</span>
            <span class="value">{{ region }}</span>
          </view>
          <view class="weather">
            <span class="label">明日天气：</span>
            <span class="value">{{ weather }}</span>
          </view>
        </view>

        <view class="wear-color">
          <view class="wear">
            <span class="label">推荐穿着：</span>
          </view>
          <view class="color">
            <span class="label">适宜颜色：</span>
          </view>
        </view>
        <view class="operate" @click="controlOperate">
          <wd-icon
            name="caret-down-small"
            size="26px"
            v-if="iconClass === 'icon-list'"
          ></wd-icon>
          <wd-icon v-else name="caret-up-small" size="26px"></wd-icon>
        </view>
      </view>
      <view :class="iconClass" :style="iconStyle">
        <view class="icon-list-wrap flex">
          <view
            class="icon-item flex-column"
            v-for="(item, index) of iconList"
            :key="item.title"
            @click="handleClick(index)"
          >
            <wd-img width="26" height="26" :src="item.url"></wd-img>
            <view class="title mt-12">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <view class="clothes-list mt-30">
        <view class="clothes-list-wrap flex">
          <view class="type-list flex-column">
            <view
              v-for="(item, index) of typeList"
              :class="[
                'type-list-item flex',
                { active: currentIndex === index },
              ]"
              @click="changeType(item, index)"
            >
              <span class="label">{{ item.first_category }}</span>
              <img src="../../static/icons/right.svg" />
            </view>
          </view>
          <view class="second-type-list">
            <BaseScrollTab :tab-list="tabList" />
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 添加分类 -->
  <AddType ref="addTypeRef" />
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

import AddType from "./addType.vue";
import tab from "../../utils/tab";
import {
  getClothesTypeList,
  updateClothesTypeList,
  deleteClothesTypeList,
} from "../../api/clothes/type";
import { getUserInfo } from "../../api/wechat";

const iconClass = ref("icon-list");
const iconStyle = ref({});
const controlOperate = () => {
  iconClass.value =
    iconClass.value === "icon-list" ? "icon-list expand" : "icon-list";
  if (iconClass.value === "icon-list") {
    setTimeout(() => {
      iconStyle.value = {
        display: "none",
      };
    }, 500);
  } else {
    iconStyle.value = {
      display: "block",
    };
  }
};

const iconList = ref([
  {
    title: "配置分类",
  },
  {
    title: "上传衣物",
    url: "https://www.sushu.online/clothesImages/upload.svg",
  },
  {
    title: "我的收藏",
    url: "https://www.sushu.online/clothesImages/collect.svg",
  },
  {
    title: "穿搭推荐",
    url: "https://www.sushu.online/clothesImages/recommend.svg",
  },
  {
    title: "功能建议",
    url: "https://www.sushu.online/clothesImages/suggestion.svg",
  },
  {
    title: "模拟搭配",
    url: "https://www.sushu.online/clothesImages/clothes.svg",
  },
]);

const tabList = ref([]);

const addTypeRef = ref(null);
function handleClick(index) {
  if (index === 0) {
    tab.navigateTo("setCategory");
  } else if (index === 1) {
    tab.navigateTo("uploadClothes");
  } else if (index === 4) {
    tab.navigateTo("suggestion/list");
  }
}

const typeList = ref([]);
const currentIndex = ref(0);
function changeType(item, index) {
  currentIndex.value = index;
  getClothesTypeList({
    firstCategory: item.first_category,
  }).then((res) => {
    if (res.code === 0) {
      if (res.data && res.data.length !== 0) {
        console.log(res);
        tabList.value = res.data[0].second_category
          ?.split(",")
          .map((category) => ({
            label: category,
          }));
        tabList.value.unshift({
          label: "全部",
        });
      } else {
        tabList.value = [
          {
            label: "全部",
          },
        ];
      }
    }
  });
}
function getList() {
  getClothesTypeList().then((res) => {
    if (res.code === 0) {
      console.log(res);
      if (res.code === 0) {
        typeList.value = res.data;
        if (res.data && res.data.length !== 0) {
          tabList.value = res.data[0].second_category
            ?.split(",")
            .map((category) => ({
              label: category,
            }));
          tabList.value.unshift({
            label: "全部",
          });
        }
      }
    }
  });
}

const avatarUrl = ref(null);
const username = ref(null);
const region = ref(null);
const weather = ref(null);
onShow(() => {
  getUserInfo({
    openId: uni.getStorageSync("openId"),
  }).then((res) => {
    if (res.code === 0) {
      avatarUrl.value = res.data.avatar_url;
      username.value = res.data.nickname;
    }
  });
  getList();
});
</script>

<style scoped lang="scss">
@keyframes expand {
  from {
    transform: rotateX(-90deg);
  }

  to {
    transform: rotateX(0);
  }
}

@keyframes fold {
  from {
    transform: rotateX(0);
  }

  to {
    transform: rotateX(-90deg);
  }
}
.clothes {
  height: 100%;
  background-color: #f5f5f5;

  .wrapper {
    height: 100%;
    overflow-y: hidden;

    .header {
      background-color: #fff;

      .user-info {
        padding: 24rpx 5%;

        image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
        }
      }

      .operate {
        image {
          width: 88rpx;
          height: 88rpx;
        }
      }
    }

    .icon-list {
      width: 90%;
      margin: 0 auto;
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 3px 3px 5px #ddd, -3px 3px 5px #ddd;
      animation: fold 0.5s forwards;
      transform-origin: left top;
      display: none;
      transition: display 0.5s;

      &.expand {
        display: block;
        animation: expand 0.5s forwards;
      }

      &-wrap {
        flex-wrap: wrap;

        .icon-item {
          flex: 1;
          min-width: 24%;
          max-width: 24%;
          align-items: center;

          .title {
            font-size: 24rpx;
          }

          &:nth-child(n + 5) {
            margin-top: 48rpx;
          }
        }
      }
    }

    .clothes-list {
      flex: 1;

      &-wrap {
        height: 100%;
        overflow-y: scroll;

        .type-list {
          align-items: center;
          width: 132rpx;
          min-width: 132rpx;

          &-item {
            width: 100%;
            white-space: nowrap;
            padding: 0 12rpx;
            box-sizing: border-box;
            height: 99rpx;
            background-color: #eaeaea;
            color: #333;
            border: 1px solid #eaeaea;
            justify-content: space-between;
            align-items: center;

            &.active {
              background-color: $main-color;
            }

            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }

        .second-type-list {
          height: 100%;
          flex: 1;
        }
      }
    }

    .second-type-list {
      flex: 1;
      overflow-x: scroll;
    }
  }
}
</style>
